<template>
  <a-table
    @change="pageChange"
    table-layout="fixed"
    sticky
    :pagination="{
      pageSize: dbTable.query.pageSize,
      current: dbTable.query.pageNum,
      total: dbTable.query.total,
    }"
    :row-selection="{
      selectedRowKeys: dbTable.keys,
      onChange,
    }"
    :custom-row="customRow"
    :rowKey="dbTable.rowKey"
    :columns="formatColumns(dbColumns)"
    :data-source="dbTable.data"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'operation'">
        <a-button type="text" @click="importDb(record.tableName)" :disabled="dbTable.loading">
          <DownloadOutlined />
        </a-button>
      </template>
    </template>
  </a-table>
</template>

<script setup lang="ts">
import { formatColumns } from '@/utils/table/table';
import type { TablePaginationConfig } from 'ant-design-vue/es/table/Table';
import { dbColumns } from '../data/column';
import { dbList, importDb } from '../data/curd';
import { dbTable } from '../data/table';

const pageChange = (pagination: TablePaginationConfig) => {
  if (pagination.current && pagination.pageSize) {
    dbTable.value.query.pageNum = pagination.current;
    dbTable.value.query.pageSize = pagination.pageSize;
    dbList();
  }
};
const onChange = (keys: any[]) => {
  dbTable.value.keys = keys;
};

const customRow = (record: any) => {
  return {
    onClick() {
      if (!dbTable.value.keys.includes(record.tableName)) {
        dbTable.value.keys = [record.tableName];
      }
    },
  };
};
</script>

<style lang="scss" scoped></style>
